<template>
  <div class="diy-wrapper">
    <a-form :label-col="{ style: { width: '40px' } }">
      <a-form-item label="层级">
        <a-input-number
          class="w-full"
          v-model:value="currentComponent.style.zIndex"
        ></a-input-number>
      </a-form-item>
      <a-form-item label="大小" name="fontSize">
        <a-input-number :min="12" class="w-full" v-model:value="fontSize" />
      </a-form-item>
      <a-form-item label="字租" name="fontWeight">
        <a-select v-model:value="currentComponent.style.fontWeight" :options="fontWeightList">
        </a-select>
      </a-form-item>
      <a-form-item class="form-item" label="缩进" name="color">
        <a-select v-model:value="textIndent" :options="textIndentList"> </a-select>
      </a-form-item>
      <a-form-item class="flex-sub" label="行高" name="lineHeight">
        <a-input-number class="w-full" :min="0" v-model:value="lineHeight" />
      </a-form-item>
      <a-form-item class="flex-sub" label="字距" name="letterSpacing">
        <a-input-number class="w-full" :min="0" v-model:value="letterSpacing" />
      </a-form-item>
      <a-form-item class="form-item" label="字体" name="fontFamily">
        <a-select v-model:value="currentComponent.style.fontFamily" :options="fontFamilyList">
        </a-select>
      </a-form-item>
      <a-form-item class="form-item" label="颜色" name="color">
        <a-input type="color" v-model:value="currentComponent.style.color" />
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { useCertStore } from '@/stores'
import { computed, type Ref } from 'vue'
import { storeToRefs } from 'pinia'
import type DiyText from '@/diy/config/DiyText'
import { useDiyHooks } from '@/hooks/useDiyHooks'

const store = useCertStore()

const currentComponent: Ref<DiyText> = storeToRefs(store).currentComponent as Ref<DiyText>

const { generateStyleProp } = useDiyHooks(store)

const fontSize = generateStyleProp('fontSize')
const lineHeight = generateStyleProp('lineHeight')
const letterSpacing = generateStyleProp('letterSpacing')

const textIndent = computed({
  get() {
    return currentComponent.value.style.textIndent
  },
  set(value: string) {
    currentComponent.value.style.textIndent = value
  }
})

const textIndentList = [
  {
    label: '0',
    value: '0'
  },
  {
    label: '1em',
    value: '1em'
  },
  {
    label: '2em',
    value: '2em'
  },
  {
    label: '3em',
    value: '3em'
  },
  {
    label: '4em',
    value: '4em'
  },
  {
    label: '5em',
    value: '5em'
  }
]

const fontFamilyList = [
  {
    label: '楷体',
    value: '楷体'
  },
  {
    label: '宋体',
    value: '宋体'
  },
  {
    label: '微软雅黑',
    value: '微软雅黑'
  },
  {
    label: 'Times New Roman',
    value: 'Times New Roman'
  }
]

const fontWeightList = [
  {
    label: '300',
    value: '300'
  },
  {
    label: '400',
    value: '400'
  },
  {
    label: '500',
    value: '500'
  },
  {
    label: '600',
    value: '600'
  },
  {
    label: '700',
    value: '700'
  },
  {
    label: '800',
    value: '800'
  },
  {
    label: '900',
    value: '900'
  }
]
</script>

<style scoped lang="less">
.diy-wrapper {
  margin-top: -10px;
  .label {
    width: 60px;
  }
}
</style>
